<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>My First Grid</title>
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="../js/strgride.js"></script>
<!--  jqgrid -->
<link rel="stylesheet"
	href="../css/ui-lightness/jquery-ui-1.10.4.custom.css" type="text/css"/>
<link rel="stylesheet" href="../css/ui.jqgrid.css" type="text/css"/>

<script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="../js/i18n/grid.locale-cn.js"></script>
<!--  ztree -->
     <link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../js/ztree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="../js/ztree/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="../js/ztree/jquery.ztree.exedit-3.5.js"></script>
<style type="text/css">
.timeTxt {
	color: red;
}
   
  
</style>
</head>

<body class="gray-bg">


	<table id="list1"></table>
	<div id="pager1"></div>
	<input type="button" id="add" value="添加">
	<input type="button" id="update" value="修改">
	<input type="button" id="ext" value="导出">
	<!-- get   jqGrid('getGridParam','url')); -->
	<a href="javascript:void(0)" id="g1"
		onclick="alert(jQuery('#list1').jqGrid('getGridParam','url'));">Get
		url</a>

	<!-- 	set    jQuery("#s6").click(function() {
    jQuery("#list7").jqGrid('setGridParam', {
      url : "server.php?q=1",
      datatype : "xml"
    }).trigger("reloadGrid");
  });-->

<input type="button"   id="test" value="测试"/>
<input type="button"   id="add11" value="无窗口添加"/>
<input type="button"   id="delete1" value="无窗口删除"/>

<input type="button"   id="ssss" value="无窗口删除111"/>
	<input type="text"   class="combo-text" style="height: 20px;" id="proxyserial" readonly />
	<div id='treeDiv' class='menuContent' style='max-height: 300px;overflow: auto;overflow-x: hidden;  width: 160px; display: none;z-index: 1; position: relative;color: #666666;border: black 1px solid'>
		<ul id='tree' class='ztree' style='width:230px;color: #666666'></ul>
	</div>
    
      
</body>
<script type="text/javascript">
	$("#proxyserial").click(function(){
		$("#proxyserial").val("");
		var cityObj1 = $("#proxyserial");
		var cityOffset1 = $("#proxyserial").offset();
		zTreeObjs = $.fn.zTree.init($("#tree"), setting, zTreeNode);
		$("#treeDiv").css({
			left : cityOffset1.left + "px",
		}).slideDown("fast");
	});
	$("body").bind("mousedown", onBodyDown2);
	function onBodyDown2(event) {
		if (!(event.target.id == "menuBtn" || event.target.id == "treeDiv" || $(event.target).parents("#treeDiv").length > 0)) {
			$("#treeDiv").fadeOut("fast");
		}
	}
	/**
 * 点击树的时候给文本框赋值 
 */
 var zTreeObjs;
	
	setting = {
			callback : {  
             onClick : zTreeOnClick
         },  
		view: {
			selectedMulti: false
		}
	
	},
	zTreeNode = [
		{"name":"网站", open:true, children: [
			{ "name":"google111","value":1},
			{ "name":"baidu","value":2 },
			{ "name":"baidu","value":2 },
			{ "name":"baidu","value":2 },
			{ "name":"baidu","value":2 },
			{ "name":"baidu","value":2 },
			{ "name":"baidu","value":2 },
			{ "name":"baidu","value":2 },
			{ "name":"baidu","value":2 },
			{ "name":"sina","value":3}
			]
		}
	];


                function zTreeOnClick(event, treeId, treeNode) {
                	if(treeId=="tree") {
						$("#proxyserial").val(treeNode.name);
					}
					else {
						$("#userName").val(treeNode.name);
					}
					$("#"+treeId).parent().fadeOut("fast");
            	};   

  
            /** 
             * 隱藏樹形下拉框 
             */  
             function hideMenu() {  
                $("#menuContent").fadeOut("fast");  
                $("body").unbind("mousedown", onBodyDown);  
            }   
  
         	$("#userName").live("click",function(){
         		$("#userName").attr({"readonly":"true"});
         	
         		if($("#menuContent").length<=0)
         			$("#userName").after( "<div id='menuContent' class='menuContent' style='display: none;z-index: 1;'>  <ul id='treeDemo' class='ztree' style='width:230px;'></ul></div>");

    			zTreeObjs = $.fn.zTree.init($("#treeDemo"), setting, zTreeNode);
    		
    			showMenu();
    		});
  
            /** 
             * 打开树形结构 
             */  
            function showMenu() {  
                var cityObj1 = $("#userName");  
                var cityOffset1 = $("#userName").offset(); 
			
                $("#menuContent").css({  

                    left : cityOffset1.left + "px",  
                    top : cityOffset1.top + cityObj1.outerHeight() + "px"  
                }).slideDown("fast");  
            $("body").bind("mousedown", onBodyDown);  
            }  
  
            /** 
             * 点击树形结构以外时，关闭树形下拉框 
             * 
             * @param event 
             */  
              function onBodyDown(event) {  
                if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {  
                    hideMenu();  
                }  
            }    
        </script>  
<script type="text/javascript">
	$(function() {
		pageInit();
	});
	function pageInit() {
		
		 jQuery("#list1").jqGrid(
			      {
			        url : 'getAllLogin',
			        datatype : "json",
			        colNames : [ 'id', 'userName', 'passWord','passWord2'],
			        colModel : [ 
			                     {name : 'id',index : 'id',width : 150}, 
			                     {name : 'userName',index : 'userName',width :200,editable:true,
			                    	 editrules:{
					                    required: true,
					                    custom:true, 
					                    custom_func:vaName
					                    }	 ,     
			                     
			                     }, 
			                     {name : 'passWord',index : 'passWord ',width : 100,editable:true,
			                    editrules:{
			                    	required: true,
			                     number:true,
			                  
			                    }	 ,        
			                    
			                     formatter:StrLenFormat
			                     },
			                     {name : 'passWord',index : 'passWord',width : 150,
			                    	 formatter:down
			                    	 }
			                     
			                   ],
			                   
			                   jsonReader:{
			                	   root:"dataList", //注意此处，是你返回的数据集名称
			                	   records:"record",
			                	   repeatitems:false
			                	   },
			                	   
			             /*    	   gridComplete: function () {//下载选项配置
			               			var ids = jQuery("#list1").jqGrid('getDataIDs');
			               			for (var i = 0; i < ids.length; i++) {
			               				var id = ids[i];
			               				var cellvalue = jQuery("#list1").jqGrid('getRowData',id).passWord;
			               			
			               				var editBtn = "<input  type='button'  onclick='javascript:console.info("+cellvalue+");'>下载</button>";
			               				jQuery("#list1").jqGrid('setRowData', ids[i], { passWord: editBtn});
			               			}
			               		}, */
			                	   
			        rowNum : 15,
			        rowList : [ 5, 10, 15 ],
			        pager : '#pager1',
			        sortname : 'id',
			        mtype : "post",
			        viewrecords : true,
			        sortorder : "asc",
			        caption : "JSON 实例",
			
			    
			      });
		 //导航栏
			  jQuery("#list1").jqGrid('navGrid', '#pager1', {
						edit : true,
						add : true,
						del : true,
						search : false,
					},
//编辑选项
					{
						editCaption : "编辑", 
						closeOnEscape:true,      //是否可以使用esc键关闭对话框
						closeAfterEdit:true,     //在添加模式下，保存添加的记录后关闭对话框
						mtype : "post",
						top:100,
						left:350,
						
						url:'update2',
						reloadAfterSubmit : true,
						afterSubmit : function(response, postdata) { 
							var json = response. responseText; 
							var result =$.parseJSON(json);
						/* 	if(result.status=='true')
								alert(result.msg);
							else alert(result.msg); */
							return [result.status, result.msg, ""]; 
							
						}
					  }, 
					  //添加
					  {
						  	baddCaption: "添加", 
							closeOnEscape:true,     //是否可以使用esc键关闭对话框
							closeAfterAdd:true,     //在添加模式下，保存添加的记录后关闭对话框
							top:200,
							left:350,
							hight:500,
							weith:500,
							url:'add ',
						/* 	editData:{
								elementId : function(){
									return $('#id').val(5);
								}
							},  */
							drag:true,              //设置对话框是否可以拖拽
							reloadAfterSubmit : true,
							
							afterSubmit : function(response, postdata) {
							
								var json = response. responseText; 
								var result =$.parseJSON(json);
								if (result.status=='true') {
									return $('#id').val(result.id);
								}else{
								
								}
								
								return [result.status, result.msg, ""]; 
							}
						},
					    {  
							delCaption: "删除", 
							top:100,
							left:400,
				            reloadAfterSubmit : false ,
				        	url:'delete',
				        	afterSubmit : function(response, postdata) { 
								var json = response. responseText; 
								var result =$.parseJSON(json);
								if (result.status=='true') {
									
								}else{
								
								}
								
								return [result.status, result.msg, ""]; 
							}
				        },  
				        {} 
			  );
			  jQuery("#list1").jqGrid('navButtonAdd','#pager',{
				    caption: "",
				   // buttonicon:"ui-icon-print",
				    title: "选择要的列",
				    onClickButton : function (){
				        jQuery("#list").jqGrid('columnChooser');
				    }

				}).navSeparatorAdd("#pager1",{sepclass : "ui-separator",sepcontent: ''}).navButtonAdd('#pager1',{
				                                           caption:"",
				                                           title:"导出数据",
				                                           buttonicon:"ui-icon-disk",
				                                           onClickButton: function(){
				                                        	
				                                    				jQuery("#list1").jqGrid('editGridRow', "new", {
				                                    					url:'add',
				                                    				      reloadAfterSubmit : false	,
				                                    			}); 
				                                    				
				                                    			//	$.post("add",{'userName':$("#userName"),'passWord':$("#passWord")});
				                                   
				                                           },
				                                           position:"last"
				                                        });
			  //编辑
			jQuery("#add").click(function(){
				jQuery("#list1").jqGrid('editGridRow', "new", {
					url:'add',
				      reloadAfterSubmit : false	,
			}); 
				
			//	$.post("add",{'userName':$("#userName"),'passWord':$("#passWord")});
			});

	function vaName(value){
				 var flag="";
				 var selrow=jQuery('#list1').jqGrid('getGridParam','selrow');
				 if(selrow!=null)
					 {return [true,""];}
				 $.ajax({
					 url:'vaName',
			            data: { userName: value },
			            type:'post',
			            async: false,//需要同步，不然值 无法传到外面 不是 顺序执行       
			            success: function (data) {
			            	var result =$.parseJSON(data);
							flag=result.data;
			            }
			        });
				 
				/* $.post("vaName",{'userName':value}, function(data){
					var result =$.parseJSON(data);
					return result.data;
				}); */
				if(flag=="true")return [true,""];
				else   { return [false,"用户名存在"]; }
			}
		
	}
	//
	
	$("#ext").click(function (){
		
		
		        var url="ext";
		        window.open(url);
	
		
	});
	$("#test").click(function (){
	//$.post("thread");  //线程实例
	//   $().jqGrid('function  name','');  代替  效果一样
	//$("#list1").addRowData("1",{id:'2',userName:'测试add',passWord:'123'},"after",25 );  //动态添加
	//$("#list1").setRowData(3,{userName:'测试add',passWord:'123'} );//动态修改
	//$("#list1").delRowData(3);//动态删除
	//$( "#list1" ).setSelection("3" , true );    // 动态选择
	// var names=$("#list1").getCol("userName",false);    //获取   userName   列的  数据   （数组）  true  像是 变成对象
	//var  names=$("#list1").getCol("0");   //第几列     第一列 下表 0   循环
/* var  id=	$("#list1").getGridParam("selrow");
			var  p2=	$("#list1").getCell(id,"3");
			alert(p2); */
	/* 	$.each(names,function(index,name){ 
console.info(name); 
}); */
	//alert(names);
	//$("#list1").clearGridData();  //清空
	//	$( "#list1" ).resetSelection();   //  选择失效
		 window.open("down");
});
	//无窗口试   添加
	$("#add11").click(function() {
		$.post("add",{
		      userName : "添加测试",
		      passWord : "asdasd"
		},function(data){
			var result =$.parseJSON(data);
			if(result.status=='true'){
				alert(result.msg);
				$("#list1").jqGrid('setGridParam',{url:'getAllLogin'}).trigger("reloadGrid");
			}
			else{}
		}); 
		//


		
	  });
	//无窗口试  删除		
		$("#delete1").click(function() {
		var selrow=$("#list1").getGridParam("selrow");
		$.get("delete?id="+selrow,function(data){
			var result=$.parseJSON(data);
			if(result.status=='true'){
				alert(result.msg);
				$("#list1").jqGrid('setGridParam',{url:'getAllLogin'}).trigger("reloadGrid");
			}
			else{}
		});
	  });
		$("#ssss").click(function() {
			var selrow=$("#list1").getGridParam("selrow");
			var a=$("#list1").getRowData(selrow);
			alert(a.userName);
			
		  });
	function down(cellvalue){	 
		
		var	 url="<input  type='button'  onclick='javascript:console.info("+cellvalue+");'>下载</button>";
		return url;
	}


</script>

</html>
<!-- colmodel 参数
align	string	left, center, right.	left
classes	string	设置列的css。多个class之间用空格分隔，如：'class1 class2' 。表格默认的css属性是ui-ellipsis	empty string
datefmt	string	”/”, ”-”, and ”.”都是有效的日期分隔符。y,Y,yyyy 年YY, yy 月m,mm for monthsd,dd 日.	ISO Date (Y-m-d)
defval	string	查询字段的默认值	空
editable	boolean	单元格是否可编辑	false
editoptions	array	编辑的一系列选项。{name:’__department_id’,index:’__department_id’,width:200,editable:true,edittype:’select’,editoptions: {dataUrl:”/jqGrid/admin/deplistforstu.action”}},这个是演示动态从服务器端获取数据。	empty
editrules	array	编辑的规则{name:’age’,index:’age’, width:90,editable:true,editrules: {edithidden:true,required:true,number:true,minValue:10,maxValue:100}},设定 年龄的最大值为100，最小值为10，而且为数字类型，并且为必输字段。	empty
edittype	string	可以编辑的类型。可选值：text, textarea, select, checkbox, password, button, image and file.	text
fixed	boolean	列宽度是否要固定不可变	false
formoptions	array	对于form进行编辑时的属性设置	empty
formatoptions	array	对某些列进行格式化的设置	none
formatter	mixed	对列进行格式化时设置的函数名或者类型 {name:’sex’,index:’sex’, align:’center’,width:60,editable:true,edittype:’select’,editoptions: {value:’0:待定;1:男;2:女’},formatter:function(cellvalue, options, rowObject){
var temp = “<img src=’/jqGrid/jquery-ui-1.7.2.custom/css/img/”
if(cellvalue==1){
temp = temp +”user-white.png”;
} else if(cellvalue==2){
temp = temp +”user-white-female.png”;
} else {
temp = temp + “user-silhouette.png”;
}
temp = temp + “‘ border=’0 ′ />”
return temp;
}},// 返回性别的图标。	none
hidedlg	boolean	是否显示或者隐藏此列	false
hidden	boolean	在初始化表格时是否要隐藏此列	false
index	string	索引。其和后台交互的参数为sidx	empty
jsonmap	string	定义了返回的json数据映射	none
key	boolean	当从服务器端返回的数据中没有id时，将此作为唯一rowid使用只有一个列可以做这项设置。如果设置多于一个，那么只选取第一个，其他被忽略	false
label	string	如果colNames为空则用此值来作为列的显示名称，如果都没有设置则使用name 值	none
name	string	表格列的名称，所有关键字，保留字都不能作为名称使用包括subgrid, cb and rn.	Required
resizable	boolean	是否可以被resizable	true
search	boolean	在搜索模式下，定义此列是否可以作为搜索列	true
searchoptions	array	设置搜索参数	empty
sortable	boolean	是否可排序	true
sorttype	string	用在当datatype为local时，定义搜索列的类型，可选值：int/integer - 对integer排序float/number/currency - 排序数字date - 排序日期text - 排序文本	text
stype	string	定义搜索元素的类型	text
surl	string	搜索数据时的url	empty
width	number	默认列的宽度，只能是象素值，不能是百分比	150
xmlmap	string	定义当前列跟返回的xml数据之间的映射关系	none
unformat	function	‘unformat’单元格值	null

<span style="font-size:18px;">var id = $("#newstable").jqGrid("getGridParam", "selrow");　　　//单行  
var selectedId = $("#newstable").jqGrid("getGridParam", "selarrrow"); //多行   
  
jqgrid使用：常用属性用法和含义  
  
1. 如何获取grid选中的行的ID？  
  
Javascript代码  
$( ).getGridParam( "selrow" );   
$().jqGridParam("getGridParam","selrow");  
  
2. 如何在表格中动态增加一行数据？   
  
Javascript代码  
//$("#jqgrid").addRowData(rowId, data, pos, idx);   
//pos可以为[first,last,before,after],为后两者是需要指定相对的行ID   
$( "#jqgrid" ).addRowData( "1" , { "name" : "test" , "age" :12}, "first" );   
//$("#jqgrid").addRowData(rowId, data, pos, idx);  
//pos可以为[first,last,before,after],为后两者是需要指定相对的行ID  
$("#jqgrid").addRowData("1", {"name":"test","age":12}, "first");  
  
3. 如何动态修改某行的数据内容，如某几列的值？   
  
Javascript代码  
//setRowData( rowid, data );   
$( "#jqgrid" ).setRowData( "1" , { tax: "5" , total: "205" });   
//setRowData( rowid, data );  
$("#jqgrid").setRowData( "1", { tax:"5", total:"205" });  
  
4. jqgrid的常用属性？   
  
Javascript代码  
$( "#jqgrid" ).jqGrid({   
url: "${ctx}/sys/role/search.dm" ,   
colNames:[ "角色名称" ], //,"角色代码"   
colModel:[ "roleName" ], //"roleCode"还可以用对象替换   
jsonReader:{id: "roleId" ,root: "dataList" },   
width:240,   
height:250,   
rowNum:20, //每页20条记录   
pager: "logListPager" , //分页显示的DIVID   
sortname: "actionTime" , //默认排序的列名   
sortorder: "desc" , //默认排序的顺序   
scroll: true , //鼠标滚动翻页   
onSelectRow: function (rowid) {}   
});   

  
5. 获取某一行的数据对象？   
  
Javascript代码  
var rowid = $( ).getGridParam( "selrow" );   
var rowData = $(  ).getRowData(rowid);    
  
6. 如何使用API动态修改选中的行？   
  
Javascript代码  
//true:重新加载表格数据, false:不重新加载表格数据   


7.如何获取某一列的值  
  
Javascript代码  
  
var col= jQuery("#jqGrid ").jqGrid('getCol',4,false);//获取第4列的值  
  
var col= jQuery("#jqGrid ").jqGrid('getCol','name',false);//获取列名为name的列的值  
  
8.如何删除一行或多行  
  
var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");   
$("#gridTable").jqGrid('delRowData', selectedId);  
  
  
还有以下常用的API，  
  
Javascript代码  
$( "#jqgrid" ).resetSelection();   
$( "#jqgrid" ).clearGridData();   
$( "#jqgrid" ).setCell(rowid,colname,nData,cssp,attrp);   
  
  
 /////
  onSelectRow : function(id) {
          if (id && id !== lastsel) {
            jQuery('#rowed3').jqGrid('restoreRow', lastsel);
            jQuery('#rowed3').jqGrid('editRow', id, true);
            lastsel = id;
          }
        },
</span>  


























-->
